<template>
	<div style="position: relative;">
		<el-input v-model="value" @change="onChangeHandler" style="padding-right: 10px;" size="mini"></el-input>
		<i class="el-icon-folder-remove" style="position: absolute;right: 0px;top:2px;" @click="onIconClickHandler"></i>
		<el-dialog title="内容" v-model="dialogVisible" width="600px">
			<el-input v-model="textareaValue" type="textarea"></el-input>
			<template #footer>
			<span class="dialog-footer">
				<el-button  @click="onButtonClickHandler" type="primary" size="mini">确定</el-button>
			</span>
			</template>
		</el-dialog>
	</div>
	
</template>

<script>
	export default {
		name: "PropertyTextareaComponent",
		props: [
			"propertyName",
			"propertyValue"
		],beforeMount() {
			this.value=this.propertyValue;
		},
		data() {
			return {
				value: "",
				textareaValue:"",
				dialogVisible:false
			}
		},
		methods: {
			onChangeHandler:function(){
				this.$emit("change",this.propertyName,this.value);
			},onIconClickHandler(){
				this.textareaValue=this.value;
				this.dialogVisible=!this.dialogVisible;
			},onButtonClickHandler(){
				this.value=this.textareaValue;
				this.onChangeHandler();
				this.dialogVisible=false;
			}
		}
	}
</script>

<style>
</style>

